/**
 * @description 设置页 - Yuanr
 */
import React, { Component } from 'react';
import {
  View, TextInput, StyleSheet, Text, Image, Button, ScrollView
} from 'react-native';
import HeaderBackButton from '../components/HeaderBackButton';

export default class MyInfo extends Component {
  static navigationOptions = ({ navigation }) => {
    const goback = navigation.getParam('goback');
    return {
      title: '我的基本信息',
      headerStyle: {
        backgroundColor: '#5b79ff'
      },
      headerTintColor: '#313131', // 导航字体颜色
      headerLeft: <HeaderBackButton click={goback} color="#313131" />
    };
  };

  constructor() {
    super();
    this.state = {
      img: 'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=45e1c8e71ddfa9ece22e501752d1f754/342ac65c103853434cc02dda9f13b07eca80883a.jpg'
    };
  }


  render() {
    const { img } = this.state;
    return (
      <ScrollView style={[styles.wrap]}>
        <View style={[styles.input]}>
          <TextInput underlineColorAndroid="transparent" placeholder="营行执照名称" />
        </View>
        <View style={[styles.input]}>
          <TextInput underlineColorAndroid="transparent" placeholder="店名" />
        </View>
        <View style={styles.imgWrap}>
          <Text style={styles.imgWrap__label}>LOGO</Text>
          <Image source={{ uri: img }} style={styles.img} />
        </View>
        <View style={styles.imgWrap}>
          <Text style={styles.imgWrap__label}>营业执照</Text>
          <Image source={{ uri: img }} style={styles.img} />
        </View>
        <View style={[styles.input]}>
          <TextInput underlineColorAndroid="transparent" placeholder="公司名称" />
        </View>
        <View style={[styles.input]}>
          <TextInput underlineColorAndroid="transparent" placeholder="公司地址" />
        </View>
        <View style={[styles.input]}>
          <TextInput underlineColorAndroid="transparent" placeholder="社会信用卡编码" />
        </View>
        <View style={[styles.input]}>
          <TextInput underlineColorAndroid="transparent" placeholder="有效期限" />
        </View>
        <View style={styles.imgWrap}>
          <Text style={styles.imgWrap__label}>餐饮许可证</Text>
          <Image source={{ uri: img }} style={styles.img} />
        </View>
        <Button style={{ marginBottom: 120 }} title="审核" onPress={() => { }} />
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  wrap: {
    flex: 1,
    padding: 10
  },
  input: {
    height: 50,
    padding: 0,
    paddingLeft: 5,
    marginBottom: 10,
    borderColor: '#ccc',
    borderStyle: 'solid',
    borderWidth: 1
  },
  img: {
    width: 100,
    height: 100
  },
  imgWrap: {
    marginBottom: 10
  },
  imgWrap__label: {
    marginBottom: 8
  }
});
